import { memo } from "react"
import { SvgComponent } from "@/components/base/Svg"
import { formatCurrency } from "@/utils/format"
import styled from "@emotion/styled"
import dayjs from "dayjs"
import { EnumBetStatus } from "../types/bet"
import { TypeBetRecordItem } from "../types/bet"

const Card = styled.div`
    height: 120rem;
    border-radius: 10rem;
    background-color: #fff;
    box-shadow: 0 0 5rem rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
`

const TitleRow = styled.div`
    display: flex;
    justify-content: space-between;
    align-items: center;
`

const GameName = styled.div`
    font-weight: 500;
    font-size: 16rem;
    height: 24rem;
    line-height: 24rem;
    color: #131416;
`

const Status = styled.div<{ status: number }>`
    font-weight: 500;
    font-size: 14rem;
    height: 24rem;
    line-height: 24rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    color: ${({ status }) => (Number(status) === 1 ? "#00B83D" : "#FFAD33")};
`

const Time = styled.div`
    color: #69728c;
    font-weight: 500;
    font-size: 12rem;
    height: 16rem;
    line-height: 16rem;
`

const TopWrapper = styled.div`
    padding: 12rem 16rem 0;
`

const BlockWrapper = styled.div`
    background: #f5f5f5;
    height: 52rem;
    margin: 4rem;
    border-radius: 6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
`

const Block = styled.div`
    flex: 1;
    text-align: center;
    height: 52rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
`

const Amount = styled.div`
    font-weight: 500;
    font-weight: 500;
    font-size: 14rem;
    height: 20rem;
    line-height: 20rem;
`

const Label = styled.div`
    color: #69728c;
    font-weight: 500;
    font-size: 12rem;
    height: 16rem;
    line-height: 16rem;
`

const Line = styled.div`
    width: 1rem;
    height: 36rem;
    background: linear-gradient(
        0,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.2) 50%,
        rgba(0, 0, 0, 0) 100%
    );
`

const IconCompletedSvg = styled(SvgComponent("pages/BetRecordPage/icon_completed.svg"))``
const IconFailedSvg = styled(SvgComponent("pages/BetRecordPage/icon_failed.svg"))``
const IconPendingSvg = styled(SvgComponent("pages/BetRecordPage/icon_pending.svg"))``

function formatTime(time?: number) {
    return time ? dayjs(time).format("MM/DD/YYYY HH:mm:ss") : "--"
}

export const BetRecordItem = memo(({ record }: { record: TypeBetRecordItem }) => {
    return (
        <Card>
            <TopWrapper>
                <TitleRow>
                    <GameName>{record.game_name}</GameName>
                    <Status status={record.status || 0}>
                        {Number(record.status) === Number(EnumBetStatus.Completed) && (
                            <>
                                <IconPendingSvg />
                                &nbsp; Completed
                            </>
                        )}
                        {Number(record.status) === Number(EnumBetStatus.Canceled) && (
                            <>
                                <IconCompletedSvg />
                                &nbsp; Canceled
                            </>
                        )}
                        {/* {record.status?.toLowerCase() === EnumBetStatus.Failed.toLowerCase() && (
                            <>
                                <IconFailedSvg />
                                &nbsp; Failed
                            </>
                        )} */}
                    </Status>
                </TitleRow>
                <Time>{formatTime(record.settle_time)}</Time>
            </TopWrapper>
            <BlockWrapper>
                <Block>
                    <Amount>
                        {record.bet_amount ? formatCurrency(parseFloat(record.bet_amount)) : "--"}
                    </Amount>
                    <Label>Bet</Label>
                </Block>
                <Line />
                <Block>
                    <Amount>
                        {record.settlement_amount
                            ? formatCurrency(parseFloat(record.settlement_amount))
                            : "--"}
                    </Amount>
                    <Label>Win</Label>
                </Block>
            </BlockWrapper>
        </Card>
    )
})
